@use "../scss/mountain" as *;
* {
  margin: 0;
  padding: 0;
}
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}
:root {
  --c1: hsl(219, 79%, 66%);
  --c2: #d733b3;
  --c3: #43256b;
  --c4: #af308f;
  --c5: #f33434;
  --c6: #e3e345;
  --c7: #f97246;
}
.wrapper {
  width: 70%;
  height: 100%;
  //   max-width: 1360px;
  //   aspect-ratio: 4/3;
  margin: 0 auto;
  perspective: 300px;
  overflow: hidden;
  background: #000;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 55%;
    bottom: 0;
    inset-inline: 0;
    background: linear-gradient(var(--c3), var(--c2));
  }
  .grid {
    position: absolute;
    width: 300vw;
    height: 600px;
    left: -100vw;
    top: 55vh;
    transform-style: preserve-3d;
    background: repeating-linear-gradient(
        var(--c1),
        var(--c1) 1px,
        transparent 1px,
        transparent 20px
      ),
      repeating-linear-gradient(
        90deg,
        var(--c1),
        var(--c1) 1px,
        transparent 1px,
        transparent 20px
      );
    transform: translate3d(0, 0, -600px) rotateX(90deg);
    transform-origin: 50% 0;
    animation: move 20s linear infinite;
    &:nth-child(2) {
      animation-delay: -10s;
    }
  }
  .g-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 43%;
    right: 0;
    background: radial-gradient(circle at 50% 100%, var(--c5), var(--c4));
    transform-style: preserve-3d;
    z-index: 1;
    -webkit-box-reflect: below -50px linear-gradient(rgba(255, 255, 255, 0.1), transparent);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.5) 4px,
        rgba(0, 0, 0, 0.5) 5px
      );
      z-index: 1;
    }
    .g-sum {
      position: absolute;
      top: 10%;
      bottom: 20%;
      inset-inline: 10%;
      background: radial-gradient(
        circle at 50% 100%,
        var(--c7),
        var(--c6) 55%,
        transparent 55.1%,
        transparent
      );
      mask: linear-gradient(
        to top,
        #000 0,
        #000 10%,
        transparent 10%,
        transparent 13%,
        #000 13%,
        #000 20%,
        transparent 20%,
        transparent 22%,
        #000 22%,
        #000 35%,
        transparent 35%,
        transparent 36%,
        #000 36%,
        #000 100%
      );
    }
  }
  .g-mountain {
    @include mountain;
    //     position: absolute;
    //     inset-inline: 0;
    //     top: 14%;
    //     bottom: 42%;
    //     z-index: 10;
    //     overflow: hidden;
    //     &::before,
    //     &::after {
    //       content: "";
    //       position: absolute;

    //       background-color: #011d3f;
    //       width: 15vw;
    //       height: 15vw;
    //       transform: rotate(-45deg);
    //       box-shadow: -3vw -3vw, 5vw 5vw, 10vw 10vw 0 3vw, 15vw 20vw 0 4vw,
    //         25vw 22vw 0 6vw, 25vw 30vw 0 11vw, 38vw 36vw 0 1vw, 41vw 39vw 0 3vw,
    //         45vw 45vw 0 2vw, 52vw 52vw 0 4vh, 55vw 55vw 0 1.5vw, 61vw 61vw 0 0.5vw,
    //         68vw 68vw 0 0;
    //     }
    //     &::before {
    //       filter: url("#filter");
    //       z-index: 2;
    //       top: 78%;
    //       color: #011d3f;
    //     }
    //     &::after {
    //       left: 1%;
    //       top: 70%;
    //       color: #23388d;
    //       z-index: 1;
    //       filter: url("#filter2");
    //     }
  }
}

@keyframes move {
  0% {
    transform: translate3d(0, 0, -600px) rotateX(90deg);
  }
  100% {
    transform: translate3d(0, 0, 600px) rotateX(90deg);
  }
}
